<template>
  <div style="color: #666; font-size: 14px">
    <div style="padding-bottom: 20px">
      <b>您好！{{ user.nickname }}</b>
    </div>
    <!-- 签约算力的金额 -->
    <el-card style="width: 100%;height: 70px;">
      <el-date-picker
          v-model="dateValue"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="clickDate">
        </el-date-picker>
        
         <el-button style="margin-left: 100px;" @click="dateSearch(1)" type="primary" plain>本年</el-button>
         <el-button @click="dateSearch(2)" type="primary" plain>本季度</el-button>
         <el-button @click="dateSearch(3)" type="primary" plain>本月</el-button>
         <el-button @click="dateSearch(4)" type="primary" plain>本周</el-button>
         
    </el-card>
    <el-card >
      <!-- 欢迎使用本系统
      <el-divider /> -->
      <div id="EChart1" style="width: 98%; height: 280px"></div>
    </el-card>
    <!-- 签约完成率 -->
    <el-card >
      <div id="EChart2" style="width: 98%; height: 280px"></div>
    </el-card>
    <!-- bd拜访客户次数 -->
    <el-card >
      <div id="EChart7" style="width: 98%; height: 280px"></div>
    </el-card>
    <!-- 高优先级客户个数 -->
    <el-card >
      <div id="EChart6" style="width: 98%; height: 280px"></div>
    </el-card>
     <!-- bd看护的大模型个数 -->
     <el-card style="display: block;" >
      <div id="EChart8" style="width: 98%; height: 280px"></div>
    </el-card>
    <!-- 200dk开发板金额和数量 -->
    <el-card >
      <div id="EChart3" style="width: 98%; height: 280px"></div>
    </el-card>
    <!-- 库存 -->
    <el-card >
      <div id="EChart9" style="width: 98%; height: 280px"></div>
    </el-card>
    <!-- 大P带货金额 -->
    <el-card >
      <div id="EChart4" style="width: 98%; height: 280px"></div>
    </el-card>
    <!-- top10带货客户 -->
    <el-card >
      <div id="EChart5" style="width: 98%; height: 280px"></div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {},
      dateValue:[]
    }
  },
  mounted() {
      // 在生命周期中调用 getRenderer 方法
      this.getContractAmount('','');
      this.getCompletionRate('','');
      this.get200dkAmountAndCount('','');
      this.getDpdhAmount('','');
      this.getDhkhTop10();
      this.getTopPriority();
      this.getBdbfCount('','');
      this.getBdBigModelCount();
      this.get200DkInventory();
  },
  methods: {
    timeSlotChange (val) {
      let startTime, endTime;
      let now = new Date(); //当前日期 
      let nowDayOfWeek = now.getDay(); //今天本周的第几天 
      let nowDay = now.getDate(); //当前日 
      let nowMonth = now.getMonth(); //当前月 
      let nowYear = now.getFullYear(); //当前年 
      let jd=Math.ceil((nowMonth + 1) / 3)
      switch (val) {
        case "本周":
          startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)
          endTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek)
          break;
        case "本月":
          startTime = new Date(nowYear, nowMonth, 1)
          endTime = new Date(nowYear, nowMonth + 1, 0)
          break;
        case "本季度":
          startTime = new Date(nowYear, (jd-1)*3, 1)
          endTime = new Date(nowYear, jd*3, 0)
          break
          case "本年":
          startTime = new Date(nowYear, 0, 1)
          endTime = new Date(nowYear, 11, 31)
          break
      }
      return [this.formaData(startTime), this.formaData(endTime)]
    },
    formaData(timer) {
        const year = timer.getFullYear()
        const month = timer.getMonth() + 1 // 由于月份从0开始，因此需加1
        const day = timer.getDate()
        return `${this.pad(year, 4)}-${this.pad(month)}-${this.pad(day)}`
    },
    pad(timeEl, total = 2, str = '0') {
        return timeEl.toString().padStart(total, str)
    },
    dateSearch(value){
      if(value == 1){
        this.dateValue = this.timeSlotChange("本年")
      }else if(value == 2){
        this.dateValue = this.timeSlotChange("本季度")
      }else if(value == 3){
        this.dateValue = this.timeSlotChange("本月")
      }else if(value == 4){
        this.dateValue = this.timeSlotChange("本周")
      }
      this.clickDate()
    },
    clickDate(){
      if(this.dateValue.length>=2){
        this.getContractAmount(this.dateValue[0],this.dateValue[1]);
        this.getCompletionRate(this.dateValue[0],this.dateValue[1]);
        this.get200dkAmountAndCount(this.dateValue[0],this.dateValue[1]);
        this.getDpdhAmount(this.dateValue[0],this.dateValue[1]);
        this.getBdbfCount(this.dateValue[0],this.dateValue[1]);
      }
    },
    // 签约算力的金额
    getContractAmount(startDt,endDt) {
       this.request.get("/xCompany/getContractAmount?startDt="+startDt+"&endDt="+endDt).then(res => {
          if (res.code === '200') {
            if(res.data){
              var db = [];
              var j_je = [];
              var n_je=[]
              var j_hk=[]
              var n_hk=[]
              res.data.sort((a, b) => b.n_je - a.n_je);
              res.data.forEach(item => {
                db.push(item.ownbd)
                j_je.push(item.j_je)
                n_je.push(item.n_je)
                j_hk.push(item.j_hk)
                n_hk.push(item.n_hk)
              });
              let EChart = this.$echarts.init(document.getElementById("EChart1"));
              // 配置参数
              let config = {
                title: {
                    text: '签约算力的金额',
                },
                legend: {
                  orient: 'vertical',
                  x:'right',
                    data: ['本年度签约总金额', '本季度签约金额', '本年度回款总金额', '本季度回款金额']
                },
                  // color: ['#3398DB','#90979c',''],
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                      }
                  },
                  grid: {
                      left: '3%',
                      right: '6%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis: [
                      {
                          type: 'category',
                          data: db,
                          name:'bd',
                          axisTick: {
                              alignWithLabel: true
                          }
                      }
                  ],
                  yAxis: [
                      {
                          type: 'value',
                          name: '金额'
                      }
                  ],
                  series: [
                      {
                          name: '本年度签约总金额',
                          type: 'bar',
                          stack: '签约',
                          label: {
                              show: true
                          },
                          data: n_je
                      },
                      {
                          name: '本季度签约金额',
                          type: 'bar',
                          stack: '签约',
                          label: {
                              show: true
                          },
                          data: j_je
                      },
                      {
                          name: '本年度回款总金额',
                          type: 'bar',
                          stack: '回款',
                          label: {
                              show: true
                          },
                          data: n_hk
                      },
                      {
                          name: '本季度回款金额',
                          type: 'bar',
                          stack: '回款',
                          label: {
                              show: true
                          },
                          data: j_hk
                      }
                      
                  ]
              };
              EChart.setOption(config);
            }
          }
        })
    },
    isNan(val){
      if(val !== val){
        return 0
      }else{
        return val
      }
    },
    // 签约完成率
    getCompletionRate(startDt,endDt) {
       this.request.get("/xCompany/getCompletionRate?startDt="+startDt+"&endDt="+endDt).then(res => {
          if (res.code === '200') {
            if(res.data){
              var bd = [];
              //回款完成率
              var n_hk = [];
              //签约完成率
              var n_je=[];
              res.data.sort((a, b) => b.n_je - a.n_je);
              res.data.forEach(item => {
                bd.push(item.ownbd)
                    if (item.ownbd == '谢天'){
                      item.hkje = 1100000
                    }
                if (item.ownbd == '鲁曦'){
                  item.hkje = 1100000
                }
                if (item.ownbd == '曹中旭'){
                  item.hkje = 600000
                }
                if (item.ownbd == '孙东明'){
                  item.hkje = 900000
                }
                if (item.ownbd == '李光峥'){
                  item.hkje = 900000
                }
                if (item.ownbd == '吴心一'){
                  item.hkje = 800000
                }
                if (item.ownbd == '唐旭'){
                  item.hkje = 700000
                }
                if (item.ownbd == '孙乾凯'){
                  item.hkje = 600000
                }
                n_je.push(this.isNan(item.n_je/item.hkje * 100).toFixed(2)),
                n_hk.push(this.isNan(item.n_hk/item.n_je * 100).toFixed(2))
              });
              let EChart = this.$echarts.init(document.getElementById("EChart2"));
              // 配置参数
              let config = {
                title: {
                    text: '签约完成率',
                },
                legend: {
                  x:'right',
                    data: ['本年度签约完成率', '本年度回款完成率']
                },
                  // color: ['#3398DB','#90979c',''],
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                      }
                  },
                  grid: {
                      left: '3%',
                      right: '6%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis: [
                      {
                          type: 'category',
                          data: bd,
                          name:'bd',
                          axisTick: {
                              alignWithLabel: true
                          }
                      }
                  ],
                  yAxis: [
                      {
                          type: 'value',
                          name:'百分比%',
                      }
                  ],
                  series: [
                      {
                          name: '本年度签约完成率',
                          type: 'bar',
                          label: {
                              show: true, formatter: '{c}%'
                          },
                          data: n_je
                      },
                      {
                          name: '本年度回款完成率',
                          type: 'bar',
                          label: {
                            show: true, formatter: '{c}%'
                          },
                          data: n_hk
                      }
                  ]
              };
              EChart.setOption(config);
            }
          }
        })
    },
     // 200dk开发板金额和数量
  get200dkAmountAndCount(startDt,endDt) {
       this.request.get("/xCompany/get200dkAmountAndCount?startDt="+startDt+"&endDt="+endDt).then(res => {
          if (res.code === '200') {
            if(res.data){
              var bd = [];
              var gs = [];
              var je=[];
              res.data.sort((a, b) => b.amount - a.amount);
              res.data.forEach(item => {
                bd.push(item.ownbd)
                je.push(item.amount)
                gs.push(item.count)
              });
              let EChart = this.$echarts.init(document.getElementById("EChart3"));
              // 配置参数
              let config = {
                title: {
                    text: '200dk开发板金额和数量',
                },
                legend: {
                  x:'right',
                    data: ['金额', '个数']
                },
                  // color: ['#3398DB','#90979c',''],
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                      }
                  },
                  grid: {
                      left: '3%',
                      right: '6%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis: [
                      {
                          type: 'category',
                          data: bd,
                          name:'bd',
                          axisTick: {
                              alignWithLabel: true
                          }
                      }
                  ],
                  yAxis: [
                    {
                        type: 'value',
                        name: '个数',
                        position: 'right'
                    },
                    {
                        type: 'value',
                        name: '金额',
                        position: 'left'
                    }
                  ],
                  series: [
                      {
                          name: '金额',
                          type: 'bar',
                          yAxisIndex: 1,
                          label: {
                              show: true
                          },
                          data: je
                      },
                      {
                          name: '个数',
                          yAxisIndex: 0,
                          type: 'bar',
                          label: {
                              show: true
                          },
                          data: gs
                      }
                  ]
              };
              EChart.setOption(config);
            }
          }
        })
    },
    //大P带货金额
    getDpdhAmount(startDt,endDt){
      this.request.get("/xCompany/getDpdhAmount?startDt="+startDt+"&endDt="+endDt).then(res => {
          if (res.code === '200') {
            if(res.data){
              var bd = [];
              var kp = [];
              var yt=[];
              res.data.sort((a, b) => b.yt - a.yt);
              res.data.forEach(item => {
                bd.push(item.ownbd)
                kp.push(item.kp)
                yt.push(item.yt)
              });
              let EChart = this.$echarts.init(document.getElementById("EChart4"));
              // 配置参数
              let config = {
                title: {
                    text: '大P带货金额',
                },
                legend: {
                  x:'right',
                    data: ['昇腾', '鲲鹏']
                },
                  // color: ['#3398DB','#90979c',''],
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                      }
                  },
                  grid: {
                      left: '3%',
                      right: '6%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis: [
                      {
                          type: 'category',
                          data: bd,
                          name:'bd',
                          axisTick: {
                              alignWithLabel: true
                          }
                      }
                  ],
                  yAxis: [
                    {
                        type: 'value',
                        name: '金额'
                    }
                  ],
                  series: [
                    {
                          name: '昇腾',
                          type: 'bar',
                          stack: '类型',
                          label: {
                              show: true
                          },
                          data: yt
                      },
                      {
                          name: '鲲鹏',
                          type: 'bar',
                          stack: '类型',
                          label: {
                              show: true
                          },
                          data: kp
                      }
                      
                  ]
              };
              EChart.setOption(config);
            }
          }
        })
    },
    //top10带货客户
    getDhkhTop10(){
      this.request.get("/xCompany/getDhkhTop10").then(res => {
          if (res.code === '200') {
            if(res.data){
              var bd = [];
              var yh = [];
              var zs=[];
              res.data.forEach(item => {
                yh.push(item.client+'/'+item.ownbd)
                bd.push(item.ownbd)
                zs.push(item.zs)
              });
              let EChart = this.$echarts.init(document.getElementById("EChart5"));
              // 配置参数
              let config = {
                title: {
                    text: 'top10带货客户',
                },
                legend: {
                  x:'right',
                    data: ['金额']
                },
                  // color: ['#3398DB','#90979c',''],
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                      }
                  },
                  grid: {
                      left: '3%',
                      right: '8%',
                      bottom: '3%',
                      containLabel: true
                  },
                  yAxis: [
                      {
                          type: 'category',
                          data: yh,
                          name:'客户/bd',
                          axisTick: {
                              alignWithLabel: true
                          }
                      }
                  ],
                  xAxis: [
                    {
                        type: 'value',
                        name: '金额'
                    }
                  ],
                  series: [
                    {
                          name: '金额',
                          type: 'bar',
                          label: {
                              show: true
                          },
                          data: zs
                      }
                      
                  ]
              };
              EChart.setOption(config);
            }
          }
        })
    },
    // 高优先级客户个数
    getTopPriority(){
      this.request.get("/xCompany/getTopPriority").then(res => {
          if (res.code === '200') {
            if(res.data){
              var bd = [];
              var gs = [];
              res.data.sort((a, b) => b.gs - a.gs);
              res.data.forEach(item => {
                bd.push(item.ownbd)
                gs.push(item.gs)
              });
              let EChart = this.$echarts.init(document.getElementById("EChart6"));
              // 配置参数
              let config = {
                title: {
                    text: '高优先级客户个数',
                },
                legend: {
                  x:'right',
                    data: ['个数']
                },
                  // color: ['#3398DB','#90979c',''],
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                      }
                  },
                  grid: {
                      left: '3%',
                      right: '8%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis: [
                      {
                          type: 'category',
                          data: bd,
                          name:'bd',
                          axisTick: {
                              alignWithLabel: true
                          }
                      }
                  ],
                  yAxis: [
                    {
                        type: 'value',
                        name: '个数'
                    }
                  ],
                  series: [
                    {
                          name: '个数',
                          type: 'bar',
                          label: {
                              show: true
                          },
                          data: gs
                      }
                      
                  ]
              };
              EChart.setOption(config);
            }
          }
        })
    },
    //bd拜访客户次数
    getBdbfCount(startDt,endDt){
      this.request.get("/xCompany/getBdbfCount?startDt="+startDt+"&endDt="+endDt).then(res => {
          if (res.code === '200') {
            if(res.data){
              var bd = [];
              var cs = [];
              res.data.sort((a, b) => b.cs - a.cs);
              res.data.forEach(item => {
                bd.push(item.ownbd)
                cs.push(item.cs)
              });
              let EChart = this.$echarts.init(document.getElementById("EChart7"));
              // 配置参数
              let config = {
                title: {
                    text: 'bd拜访客户次数',
                },
                legend: {
                  x:'right',
                    data: ['次数']
                },
                  // color: ['#3398DB','#90979c',''],
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                      }
                  },
                  grid: {
                      left: '3%',
                      right: '8%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis: [
                      {
                          type: 'category',
                          data: bd,
                          name:'bd',
                          axisTick: {
                              alignWithLabel: true
                          }
                      }
                  ],
                  yAxis: [
                    {
                        type: 'value',
                        name: '次数'
                    }
                  ],
                  series: [
                    {
                          name: '次数',
                          type: 'bar',
                          label: {
                              show: true
                          },
                          data: cs
                      }
                      
                  ]
              };
              EChart.setOption(config);
            }
          }
        })
    },
    //bd看护与发布的大模型个数
    getBdBigModelCount(){
      this.request.get("/xCompany/getBdBigModelCount").then(res => {
          if (res.code === '200') {
            if(res.data){
              var bd = [];
              var kh = [];
              var fb = [];
              res.data.sort((a, b) => b.kh - a.kh);
              res.data.forEach(item => {
                bd.push(item.ownbd)
                kh.push(item.kh)
                fb.push(item.fb)
              });
              let EChart = this.$echarts.init(document.getElementById("EChart8"));
              // 配置参数
              let config = {
                title: {
                    text: 'bd看护与发布的大模型个数',
                },
                legend: {
                  x:'right',
                    data: ['看护个数','发布个数']
                },
                  // color: ['#3398DB','#90979c',''],
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                      }
                  },
                  grid: {
                      left: '3%',
                      right: '8%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis: [
                      {
                          type: 'category',
                          data: bd,
                          name:'bd',
                          axisTick: {
                              alignWithLabel: true
                          }
                      }
                  ],
                  yAxis: [
                    {
                        type: 'value',
                        name: '个数'
                    }
                  ],
                  series: [
                    {
                          name: '看护个数',
                          type: 'bar',
                          stack:'个数',
                          label: {
                              show: true
                          },
                          data: kh
                      },
                      {
                          name: '发布个数',
                          type: 'bar',
                          stack:'个数',
                          label: {
                              show: true
                          },
                          data: fb
                      } 
                  ]
              };
              EChart.setOption(config);
            }
          }
        })
    },
    //200dk库存
    get200DkInventory(){
      this.request.get("/xCompany/get200DkInventory").then(res => {
          if (res.code === '200') {
            if(res.data){
              var bd = [];
              var sy = 100;
              var xh=[];
              res.data.sort((a, b) => a.count - b.count);
              res.data.forEach(item => {
                bd.push(item.ownbd)
                xh.push(item.count)
                // xh.push(100-item.count)
                sy = sy - item.count
              });
              bd.push('剩余')
              xh.push(sy)
              let EChart = this.$echarts.init(document.getElementById("EChart9"));
              // 配置参数
              let config = {
                title: {
                    text: '200dk库存',
                },
                legend: {
                  x:'right',
                    data: ['消耗']
                },
                  // color: ['#3398DB','#90979c',''],
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                      }
                  },
                  grid: {
                      left: '3%',
                      right: '8%',
                      bottom: '3%',
                      containLabel: true
                  },
                  yAxis: [
                      {
                          type: 'category',
                          data: bd,
                          name:'bd',
                          axisTick: {
                              alignWithLabel: true
                          }
                      }
                  ],
                  xAxis: [
                    {
                        type: 'value',
                        name: '金额'
                    }
                  ],
                  series: [
                    {
                          name: '消耗',
                          type: 'bar',
                          label: {
                              show: true
                          },
                          data: xh
                      },
                      // {
                      //     name: '剩余',
                      //     type: 'bar',
                      //     label: {
                      //         show: true
                      //     },
                      //     data: sy
                      // }
                      
                  ]
              };
              EChart.setOption(config);
            }
          }
        })
    }
  }
 
}
</script>
<style scoped>
.el-card {
  width: 49%;
  height: 300px;
  display: inline-block;
  margin: 0.5%;
}
</style>
